<template>
  <div id="app">
    <!-- 解封 -->
    <complaint ref="complaint" v-if="showComplaint"></complaint>
    <tools v-if="showTool"></tools>
    <!-- <router-view v-if="!$route.meta.keepAlive" /> -->
    <!-- <keep-alive> -->
    <router-view v-if="isRouterActive" />
    <!-- </keep-alive> -->
    <masks
      :data="item"
      autoShow
      autoType="unRead"
      @dealWith="dealWith"
      v-for="(item, index) in unReadAuthMsg"
      v-if="index == 0"
      :key="item.id"
    ></masks>
    <masks2
      ref="mask2"
      autoShow
      :autoType="item.type == 1 ? 'cmembership1' : 'cmembership2'"
      @operate="operate"
      v-for="(item, index) in receivePrompt"
      v-if="showMsgFromAdmin && index == 0"
      :key="item.id"
    ></masks2>
  </div>
</template>
<script>
import tools from "@/components/tools";

import complaint from "@/components/complaint.vue";
import masks from "@/views/invite/comp/mask.vue";
import masks2 from "@/views/my/mask.vue";

import { mapState, mapMutations } from "vuex";
export default {
  components: {
    complaint,
    tools,
    masks,
    masks2,
  },
  name: "App",
  provide() {
    return {
      reload: this.reload,
      getMsgFromAdmin: this.getMsgFromAdmin,
      changeShowState: this.changeShowState,
      showMsgFromAdmin: this.showMsgFromAdmin,
    };
  },
  data() {
    return {
      isRouterActive: true,
      showTool: false,
      unReadAuthMsg: [],
      timer: null,
      receivePrompt: [],
      showMsgFromAdmin: false,
    };
  },
  computed: {
    ...mapState({
      showComplaint: (state) => state.showComplaint,
    }),
  },
  watch: {
    showComplaint: {
      handler: function (newV, oldV) {
        // alert('监听到了'+newV+oldV)
      },
      immediate: true,
    },
    $route: {
      handler: function (newV, oldV) {
        let path = newV.fullPath;
        if (path.indexOf("my") > -1) {
          this.showTool = false;
        } else if (path.indexOf("release") > -1) {
          this.showTool = true;
        } else {
          this.showTool = true;
        }

        console.log(newV);
        console.log(oldV);
        // alert('监听到了' + newV + oldV)
        this.timer && clearInterval(this.timer);
        this.timer = setTimeout(() => {
          this.getExamineMsg();
        }, 500);
        this.getMsgFromAdmin();
      },
      // immediate: true,
      // deep:true,
    },
  },

  created() {
    console.log("createdcreatedcreated");
    // console.log('showComplaintshowComplaintshowComplaint');
    this.initUserInfo();
    // console.log(this.$route.path.indexOf('information'));
    if (this.$route.path.indexOf("information") == -1) {
      // if(!localStorage.getItem("needed")||localStorage.getItem("needed")==0){
      //   this.queryMsg()
      // }
    }
  },
  mounted() {},
  methods: {
    ...mapMutations(["setShowComplaint", "login", "setMsgCount"]),

    reload() {
      this.isRouterActive = false;
      this.$nextTick(function () {
        this.isRouterActive = true;
      });
    },

    getMsgFromAdmin() {
      let user = JSON.parse(localStorage.getItem("userInfo"));

      if (user && user.merchantId && !user.merchantStaffId) {
        this.showMsgFromAdmin = false;

        //   localStorage.getItem("showMsgFromAdmin") != "false";
        // localStorage.setItem("showMsgFromAdmin", true);
        this.$getHttp("/api/mobile/vehicleOwner/getWhetherPromptToMerchant", {
          userId: user.merchantId,
        }).then((res) => {
          if (res.whetherPrompt.length > 0) {
            this.receivePrompt = res.whetherPrompt;
          }
          if (
            this.$route.path.indexOf("/my/vipCenterCopy") > -1
            //  &&
            // this.$route.query.from == "popup" &&
            // this.$route.query.movementNo
          ) {
            this.showMsgFromAdmin = false;
          } else {
            this.showMsgFromAdmin = res.whetherPrompt.length > 0;
          }
        });
      }
    },
    changeShowState(flag) {
      this.showMsgFromAdmin = flag;
    },
    operate() {
      this[
        this.$route.path.indexOf("/my/vipCenterCopy") > -1
          ? "openUrls"
          : "openUrlb"
      ]("/my/vipCenterCopy", {
        from: "popup",
        ...this.receivePrompt[0],
      });

      localStorage.setItem("showMsgFromAdmin", false);
    },
    // 查询未审核人员
    getExamineMsg() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      this.user = user;
      if (user != null) {
        this.$getHttp("/mob/user/getExamineInfo", {
          pageSize: 20,
          pageNo: 1,
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
        }).then((data) => {
          if (data.code == 200) {
            let arr = data.page.result.filter(
              (item) =>
                item.type == 2 && item.examine_status == 0 && item.is_read == 2
            );
            if (arr.length > 0) {
              // 有未读的认证申请
              this.unReadAuthMsg = arr;
            } else {
              this.unReadAuthMsg = [];
            }
          }
        });
      }
    },
    dealWith(flag, originalData) {
      // console.log('flagflagflag', flag)
      let item = originalData;
      let data = {};
      let url;
      if (item.business_type == 1) {
        data = {
          shopName: this.user.shopName,
          shopId: this.user.shopId,
          userId: item.create_by,
          id: item.id,
          examineStatus: 0,
          remark: "",
          createBy: item.create_by,
        };
        url = "/mob/user/merchantAudit";
      } else {
        data = {
          reviewedBy: this.user.id,
          auditee: item.create_by,
          storeId: this.user.shopId,
          auditStatus: 0,
          systemMessagesId: item.id,
          refuseReason: "",
        };
        url = "/api/mobile/vehicleOwner/salesConsultantReview";
      }
      if (flag) {
        // 同意
        delete data.remark;
        if (item.business_type == 1) {
          data.examineStatus = 1;
        } else if (item.business_type == 2) {
          data.auditStatus = 1;
        }
        this.$postHttp(url, data).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "审核成功",
              type: "success",
            });
            this.getExamineMsg();
          }
        });
      } else {
        // 拒绝
        this.$prompt("请输入拒绝原因", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            if (item.business_type == 1) {
              data.examineStatus = 2;
              data.remark = value == null ? "" : value;
            } else if (item.business_type == 2) {
              data.auditStatus = 2;
              data.refuseReason = value == null ? "" : value;
            }
            this.$postHttp(url, data).then((data) => {
              if (data.code == 200) {
                this.$message({
                  message: data.msg,
                  type: "success",
                });
                this.getExamineMsg();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消审核",
            });
          });
      }
    },
    //查询最新用户信息
    initUserInfo() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.$getHttp("/mob/login/getUserInfoByPhone", {
          phone: JSON.parse(localStorage.getItem("userInfo")).phone,
        }).then((data) => {
          if (data.code == 200) {
            localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
          }
        });
        //查询是否被标记离职
        localStorage.setItem("confirm", true);

        // this.getExamineInfo()
        this.queryMsg();
      }
    },

    queryMsg() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.$getHttp("/mob/user/getIsReadMsg", {
          isRead: 2,
          examineStatus: 2,
          userId: user.id,
        }).then((data) => {
          if (data.code == 200) {
            this.setMsgCount(data.result);
            // localStorage.setItem("msgCount", data.result);
            return;
            var len = data.page.result.filter((item) => {
              window.location.localStorage.s;
              if (item.type == "2" && item.examine_status == "0") {
                return true;
              }
              return false;
            }).length;
            console.log("123123", len);
            if (len > 0) {
              //有需要审核的
              localStorage.setItem("needed", 2);
              // this.$confirm('有消息通知需要去审核, 是否跳转审核页面?', '提示', {
              //   confirmButtonText: '确定',
              //   cancelButtonText: '取消',
              //   type: 'warning'
              // }).then(() => {
              //   //  看过了的
              //   this.$router.push({
              //     path:'/my/information'
              //   })

              // }).catch(() => {
              //   //  不想去看
              // });
            }
          }
        });
      }
    },
  },
};
</script>

<style lang="less">
@import url("./assets/css/global.less");

// .saoma {
//   transform-origin: top center;
//   transform: scale(2);
// }

// .saoma span {
//   transform-origin: top center;
//   transform: scale(0.5);
// }

.box {
  overflow: hidden;
}

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.cxjgRight_span {
  vertical-align: middle;
}

.right {
  :not(.add-checkbox) {
    span {
      vertical-align: middle;
    }
  }

  // el-checkbox__label
}

.pointer {
  cursor: pointer;
}

.tit,
.tit1 {
  position: relative;
  z-index: 998;
}

.tit .list,
.tit1 .list {
  display: flex;
  align-items: center;
}

.tit1 .list .title,
.tit1 .list .ti,
.tit1 .list .xuan,
.tit .list .title {
  line-height: 56px;
}

.seat {
  opacity: 0;
  user-select: none;
}

.pos-r,
.relative {
  position: relative;
  z-index: 999;
}

.tag-btn-wrap {
  height: 50px;
  width: 100%;
  background-color: #fff;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.tag-btn {
  /* width: 208px; */
  padding: 0 12px;
  height: 48px;
  background-color: #64b6a8;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  line-height: 48px;
  font-size: 18px;
  text-align: center;
}

.text-one {
  /*1. 先强制一行内显示文本*/
  white-space: nowrap;
  /*2. 超出的部分隐藏*/
  overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
  text-overflow: ellipsis;
}

.btn {
  border: none;
  appearance: none;
  outline: none;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  border: 1px solid #64b6a8;
  color: #64b6a8;
  line-height: 50px;
  box-sizing: border-box;
}

.c-comfirm-btn {
  background-color: #64b6a8;
  color: #fff;
}

.c-cancel-btn {
  border: 1px solid #64b6a8;
  color: #64b6a8;
}

// 分页覆盖样式
.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.t_1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line7 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  word-break: break-all;
}

.line6 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  word-break: break-all;
}

.line5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  word-break: break-all;
}

.line4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  word-break: break-all;
}

.line3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}

.line2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}

.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-direction {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

/deep/body {
  font-size: 0px;
}

.flex_nav {
  display: flex;
  justify-content: space-around;
}

.flex_end {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
}

.flex-al-center {
  align-items: center;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex_right {
  display: flex;
  justify-content: flex-end;
}

.flex_left {
  display: flex;
  justify-content: flex-end;
}

.content {
  width: 1200px;
  margin: 0 auto;
}

html {
  width: 100%;
  -webkit-text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #fff;
  background: #fff;
  min-height: 100%;
  font-family: "Microsoft Yahei", "微软雅黑", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

ul,
ul li,
ol,
li {
  list-style: none outside none;
}

img {
  vertical-align: middle;
  border: none;
  /* width: 100%; */
}

i {
  font: inherit;
}

input,
select,
option {
  vertical-align: middle;
  border-radius: 0px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}

input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
}

.fl {
  float: left;
  display: inline;
}

.fr {
  float: right;
  display: inline;
}

h1,
h2,
h3,
h4,
h5,
h6,
i,
strong {
  font-weight: normal;
}

select::-ms-expand {
  display: none;
}

a {
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:hover {
  text-decoration: none;
  outline: none;
}

.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;
  display: block;
  _height: 1px;
  clear: both;
}

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

[v-cloak] {
  display: none;
}
</style>
<style scoped>
.logo {
  width: 1200px;
  height: 80px;
  margin: auto;
}

.logo img {
  width: 72px;
  height: 52px;
  margin-top: 19px;
}

.logo div {
  display: inline-block;
  height: 80px;
  line-height: 80px;
  vertical-align: top;
  color: #0b9ade;
  font-size: 30px;
}

.navigation {
  width: 100%;
  height: 50px;
  background-color: #0b9ade;
}

.navigation .ul {
  width: 1200px;
  height: 50px;
  margin: auto;
}

.navigation .li {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  font-size: 18px;
  color: #fff;
}

.navigation .liXu {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  font-size: 18px;
  color: #fff;
  background-color: #6ac1eb;
}

.pointer {
  cursor: pointer;
}
</style>
